<template>
  <div class="home1">

    <br/>

    <el-card shadow="always">
      自服务管理
    </el-card>
    <br>
    <br>
    <el-button type="primary" @click="dialogVisibleAdd = true">新增申请单</el-button>
    <br>
    <br>
    <!-- 修改申请单 -->

    <el-dialog
      title="查看"
      :visible.sync="dialogVisible0123"
      width="50%">
       
        <el-col :span="24">
          策略名称: <el-input></el-input>
        </el-col>
        
        <el-col :span="24">
          状态: 
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 
          类型: 
          <el-select  v-model="aaasss2" style="width: 200px">
            <el-option label="IPv4" value="IPv4"> </el-option>
            <el-option label="IPv6" value="IPv6"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 
          入接口: 
          <el-radio v-model="radio1" label="111">所有链路</el-radio>
          <el-radio v-model="radio2" label="222">指定链路</el-radio>
          WAN/LAN: 
          <el-select  v-model="aaasss3" style="width: 200px">
            <el-option label="选择1" value="选择1"> </el-option>
            <el-option label="选择2" value="选择2"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          公网访问者IP:
            <el-radio v-model="radio1" label="111">所有IP</el-radio>
            <el-radio v-model="radio2" label="222">指定IP</el-radio>
            <el-input  style="width: 200px"></el-input>
        </el-col>
        <el-col :span="24">
          应用internetIP:
            <el-radio v-model="radio1" label="111">所有IP</el-radio>
            <el-radio v-model="radio2" label="222">指定IP</el-radio>
            <el-input  style="width: 200px"></el-input>
        </el-col>
        <el-col :span="24"> 应用DMZIP: <el-input></el-input> </el-col>
        <el-col :span="24"> 应用DMZ服务: <el-input></el-input> </el-col>
        <el-col :span="24">
          <br>
          是否开启ICMP: 
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <br>
        </el-col>
        <el-col :span="24" @change="checked88 == false"> 
          ALL: 
          <el-checkbox v-model="checked88" >ALL</el-checkbox>
        </el-col>
        <el-col :span="24"> 
          TCP: 
          <el-checkbox v-model="checked99" :disabled="checked88 == true">TCP</el-checkbox>
          TCP源端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input>T
          CP目的端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input>
        </el-col>
        <el-col :span="24" > 
          UDP: 
          <el-checkbox v-model="checked100" :disabled="checked88 == true">UDP</el-checkbox>
          UDP源端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input>
          UDP目的端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input> 
        </el-col>

      

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible0123 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible0123 = false">确 定</el-button>
      </span>
    </el-dialog>

     
    <!-- 新增申请单 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisibleAdd"
      width="80%">
      <el-row>
        <el-col :span="12">
          申请类别: 
          <el-select v-model="value5" placeholder="请选择" @change="value5 == '111' ? ssss = true : ssss = false" >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12"> 所属区域: <el-input></el-input> </el-col>
        <el-col :span="12"> 所属链路: <el-input></el-input> </el-col>
        <el-col :span="12"> 固定电话: <el-input></el-input> </el-col>
        <el-col :span="12"> 所属单位: <el-input></el-input> </el-col>
        <el-col :span="12"> 手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机: <el-input></el-input> </el-col>
        <el-col :span="12"> 申请部门: <el-input></el-input> </el-col>
        <el-col :span="12"> 邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱: <el-input></el-input> </el-col>
        <el-col :span="12"> 开放期限:
          <el-select v-model="value11" placeholder="请选择">
            <el-option  label="长期" value="长期"> 长期</el-option>
            <el-option  label="一年" value="一年"> 一年</el-option>
            <el-option  label="不限" value="不限"> 不限</el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 申请原因: <el-input style="width: 80%"></el-input> </el-col>
        <el-col :span="24" style="margin: 30px;"> 桌面安全系统部署情况:
           <el-checkbox-group style="display: inline-block" >
              <el-checkbox label="防病毒客户端"></el-checkbox>
              <el-checkbox label="后台管理客户端"></el-checkbox>
            </el-checkbox-group>
        </el-col>
        <!-- 申请单 table -->
        <el-col :span="24"  v-if="value5 == '222' || value5 == '333'"> 
          <el-table
            :data="tableDatass"
            style="width: 100%"
            height="120px">
            <el-table-column prop="date1" label="业务名称" > </el-table-column>
            <el-table-column prop="date" label="使用人" > </el-table-column>
            <el-table-column prop="date" label="访问者IP" > </el-table-column>
            <el-table-column prop="date" label="源端口" > </el-table-column>
            <el-table-column prop="date" label="应用internetIP" > </el-table-column>
            <el-table-column prop="date" label="协议" > </el-table-column>
            <el-table-column prop="date" label="目的端口" > </el-table-column>
            <el-table-column prop="date" label="备注" > </el-table-column>
            <el-table-column prop="date" label="是否开启ICMP" > </el-table-column>
            <el-table-column v-if="value5 == '222'" prop="date" label="是否固定IP" > </el-table-column>
            <!-- <el-table-column prop="date" label="访问者IP(互联网用户)" > </el-table-column>
            <el-table-column prop="date" label="internet（应用公网ip）" > </el-table-column> -->
            <el-table-column  align="center" fixed="right" width="150px" label="操作">
              <template >
                <el-button type="text" v-if="value5 == '333'" @click="dialogVisible0123 = true">查看</el-button>
                <el-button type="text" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button v-if=" title == '变更申请单' || title == '新增申请单' " @click="dialogVisible123 = true" type="primary">添加一条</el-button>
        </el-col>
        <br>
        <!-- 开通内网IP地址、关闭内网IP地址 -->
        <el-row v-show="ssss" >
          <el-col :span="12" style="padding: 10px">
            <el-col :span="24">
              开通内网IP地址:
            </el-col>
            <el-col :span="24">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="IP地址，使用人(申请人)，所属部门，使用人(申请人)电子邮件，备注;"
                v-model="textarea">
              </el-input>
            </el-col>
          </el-col>
          <el-col :span="12" style="padding: 10px">
            <el-col :span="24">
              关闭内网IP地址:
            </el-col>
            <el-col :span="24">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="IP地址，使用人(申请人)，所属部门，使用人(申请人)电子邮件，备注;"
                v-model="textarea">
              </el-input>
            </el-col>
          </el-col>
        </el-row>
        <el-col :span="24"> 
          <br>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleAdd = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- table -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="aaa0"
        label="编号" >
      </el-table-column>
      <el-table-column
        prop="aaa1"
        label="状态" >
      </el-table-column>
      <el-table-column
        prop="aaa2"
        label="申请单类型" >
      </el-table-column>
      <el-table-column
        prop="aaa3"
        label="所属单位" >
      </el-table-column>
      <el-table-column
        prop="aaa4"
        label="申请部门" >
      </el-table-column>
      <el-table-column
        prop="aaa5"
        label="申请时间" >
      </el-table-column>
      <el-table-column
        prop="aaa6"
        label="联系电话" >
      </el-table-column>
      <el-table-column
        prop="aaa7"
        label="所属区域" >
      </el-table-column>
      <el-table-column
        prop="aaa8"
        label="所属链路" >
      </el-table-column>
      <el-table-column
        prop="aaa9"
        label="申请原因" >
      </el-table-column>
      <el-table-column
        prop="aaa10"
        label="开放期限" >
      </el-table-column>
      <el-table-column
        prop="aaa11"
        label="桌面安全系统部署情况" >
      </el-table-column>
      <el-table-column
        prop="aaa12"
        label="协议" >
      </el-table-column>
      <!-- <el-table-column
        prop="aaa13"
        label="自建统建项目" >
      </el-table-column> -->
      <el-table-column  align="center" fixed="right" width="150px" label="操作">
        <template >
          <el-button type="text"  @click="title = '查看申请单', dialogVisibleAdd = true">查看</el-button>
          <el-button type="text"  @click="title = '历史申请单',dialogVisibleAdd = true">历史</el-button>
          <el-button type="text"  @click="title = '变更申请单',dialogVisibleAdd = true">变更</el-button>
          <el-button type="text" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <br>
    <br>

    <!-- 备注 -->
    <el-card shadow="always">
      备注事项: 
      <br>
      <br>
      添加一行申请单内容的时候, 可以支持复制粘贴, 最好新增带上一条历史
      <br>
      <br>
      操作类型: 新增、关闭
      <br>
      <br>
      业务名称(字数限制)、使用人、源地址、源端口、目的地址、协议、目的端口、是否开启ICMP、是否固定IP、
      <img src="./imgs/m1.png" style="width: 70%" alt="">
      <!-- <img src="./imgs/m2.png" style="width: 100%" alt="">
      <img src="./imgs/m3.png" style="width: 100%" alt=""> -->
    </el-card>




    <!-- 添加一条 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible123"
      width="60%">
        <!-- <img src="./imgs/m4.png" style="width: 100%" alt=""> -->

        <el-col :span="24">
          策略名称: <el-input></el-input>
        </el-col>
        
        <el-col :span="24">
          状态: 
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 
          IP类型: 
          <el-select  v-model="aaasss2" style="width: 200px">
            <el-option label="IPv4" value="IPv4"> </el-option>
            <el-option label="IPv6" value="IPv6"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 
          入接口: 
          <el-radio v-model="radio1" label="111">所有链路</el-radio>
          <el-radio v-model="radio2" label="222">指定链路</el-radio>
          WAN/LAN: 
          <el-select  v-model="aaasss3" style="width: 200px">
            <el-option label="选择1" value="选择1"> </el-option>
            <el-option label="选择2" value="选择2"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          公网访问者IP:
            <el-radio v-model="radio1" label="111">所有IP</el-radio>
            <el-radio v-model="radio2" label="222">指定IP</el-radio>
            <el-input  style="width: 200px"></el-input>
        </el-col>
        <el-col :span="24">
          应用internetIP:
            <el-radio v-model="radio1" label="111">所有IP</el-radio>
            <el-radio v-model="radio2" label="222">指定IP</el-radio>
            <el-input  style="width: 200px"></el-input>
        </el-col>
        <el-col :span="24"> 应用DMZIP: <el-input></el-input> </el-col>
        <el-col :span="24"> 应用DMZ服务: <el-input></el-input> </el-col>
        <el-col :span="24">
          <br>
          是否开启ICMP: 
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <br>
        </el-col>
        <el-col :span="24" @change="checked88 == false"> 
          ALL: 
          <el-checkbox v-model="checked88" >ALL</el-checkbox>
        </el-col>
        <el-col :span="24"> 
          TCP: 
          <el-checkbox v-model="checked99" :disabled="checked88 == true">TCP</el-checkbox>
          TCP源端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input>T
          CP目的端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input>
        </el-col>
        <el-col :span="24" > 
          UDP: 
          <el-checkbox v-model="checked100" :disabled="checked88 == true">UDP</el-checkbox>
          UDP源端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input>
          UDP目的端口: <el-input style="width: 100px" :disabled="checked88 == true"></el-input> 
        </el-col>





      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible123 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible123 = false">确 定</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      dialogVisible0123: false,
      title: '新增申请单',
      checked88: false,
      checked99: false,
      checked100: false,
      chack: '',
      aaasss1: '',
      aaasss2: '',
      aaasss3: '',
      disabled: false,
      checkList: ['ALL'],
      radio1: '333',
      radio2: '222',
      tableDatass: [
        {
          date: '',
          date1: 'XXX',
        }
      ],
      dialogVisible123: false,
      textarea: '',
      dialogVisible99: false,
      ssss: true,
      values: true,
      values1: true,
      value11: '',
      value111: '开启',
      value22: 'TCP',
      dialogVisibleAdd: false,
      value5: '111',
      options1: [
        {
          label: '企事业单位代理服务申请',
          value: '111'
        },
        {
          label: '互联网出口资源特殊应用直通申请',
          value: '222'
        },
        {
          label: '应用系统互联网资源映射申请',
          value: '333'
        }
      ],
      tableData: [
        {
          aaa0: '1',
          aaa1 : '进行中',
          aaa2 : '企事业单位代理服务申请',
          aaa3 : '',
          aaa4 : '',
          aaa5 : '2020-02-02',
          aaa6 : '1520023432',
          aaa7 : ' 昌平数据中心',
          aaa8 :  '链路二',
          aaa9: '有需要..',
          aaa10: '一年',
          aaa11: 'SEP,VRV',
          aaa12: 'TCP',
          aaa13: 'vm服务器',
        },
        {
          aaa0: '2',
          aaa1 : '未下发',
          aaa2 : '互联网出口资源特殊应用直通申请',
          aaa3 : '',
          aaa4 : '',
          aaa5 : '2020-02-02',
          aaa6 : '1342223432',
          aaa7 : ' 东直门数据中心',
          aaa8 : '链路一',
          aaa9: '',
          aaa10: '一年',
          aaa11: 'SEP,VRV',
          aaa12: 'UDP',
          aaa13: 'vm服务器',
        },
        {
          aaa0: '2',
          aaa1 : '未下发',
          aaa2 : '应用系统互联网资源映射申请',
          aaa3 : '',
          aaa4 : '',
          aaa5 : '2020-02-02',
          aaa6 : '1342223432',
          aaa7 : ' 昌平数据中心',
          aaa8 : '链路一',
          aaa9: '',
          aaa10: '一年',
          aaa11: 'SEP,VRV',
          aaa12: 'UDP',
          aaa13: 'vm服务器',
        }
      ]
    }
  },
  methods: {
    changeSelect () {
      this.value5 == '111' ? this.ssss = true : this.ssss = false
    },
    changeChack (value) {
      this.chack = JSON.stringify(value)
      console.log(this.chack)
    }
  }
}
</script>

<style scoped>
  .home1 .el-input, .home1 .el-select{
    width: 70%;
    display: inline-block;
    margin: 10px;
  }
</style>
